<template>
	<view class="mask" @click="close">
		<view class="parseSkuInput" @click.stop="() => {}">
			<view class="info-box">
				<image
					:height="50"
					:src="
						activeSku?.skuImageUrl ||
						nameList[activeIndex1]?.skuImageUrl ||
						goodsInfo?.productImage?.images[0]
					"
					:lazy-load="true"
					class="sku-img"
				/>
				<view class="price-stock">
					<text class="price">{{ usePrice(activeSku?.price) }}</text>
					<text class="amountOnSale">库存:{{ activeSku?.amountOnSale }}</text>
					<text class="number">x{{ activeSku?.number }}</text>
				</view>
			</view>

			<view class="box" v-if="props.name1">
				<text class="name">{{ props.name1 }}</text>
				<view class="sku sku1">
					<block v-for="(item, index) in nameList">
						<view
							v-if="item?.name"
							:key="item.value"
							class="skuItemLine"
							:style="activeIndex1 == index ? { color: '#cc302d', border: '1rpx solid #cc302d' } : {}"
							@click="() => changeActiveSku1(index)"
						>
							<text class="line2">{{ item?.value }}</text>
						</view>
					</block>
				</view>
			</view>

			<view class="box">
				<text class="name" v-if="props.name2">{{ props.name2 }}</text>
				<view class="sku sku2">
					<view
						class="skuItem"
						:style="
							activeSku && activeSku.specId == item.specId
								? { color: '#cc302d', border: '1rpx solid #cc302d' }
								: {}
						"
						v-for="(item, index) in activeSkuList"
						:key="item.specId"
						@click="() => changeActiveSku2(index)"
					>
						<image
							v-if="item.skuImageUrl"
							:lazy-load="true"
							:src="item.skuImageUrl"
							class="img"
							mode="scaleToFill"
						/>
						<text class="txt line2">{{ item.value2 }}</text>
					</view>
				</view>
			</view>

			<view class="stock" v-if="activeSku">
				<text class="name">数量</text>
				<wd-input-number
					input-width="200rpx"
					:min="minNum"
					:max="activeSku.amountOnSale"
					:modelValue="activeSku.number"
					@change="handleNumChange"
				/>
			</view>

			<view class="actionBtns">
				<wd-button class="btn" block @click="handleAddCart">Añadir al carrito de la compra</wd-button>
			</view>

			<!-- <view class="orderPriceWrapper">
      <view class="orderLeftWrapper">
        <view class="totalCount">Total {{ totalNumber }} piezas</view>
        <view class="totalPrice">
          <view>
            Monto del producto:
            <text class="value">{{ totalMoney }}</text>
          </view>
        </view>
      </view>
    </view>

     -->
		</view>
	</view>
</template>
<script setup>
import { http } from '@/utils/http'

const props = defineProps({
	goodsInfo: {
		type: Object,
		default: () => ({}),
	},
	productSkuInfos: {
		type: Array,
		default: () => [],
	},
	productSaleInfo: {
		type: Object,
		default: () => {},
	},
	name1: {
		type: String,
		default: '',
	},
	name2: {
		type: String,
		default: '',
	},
})

const emits = defineEmits(['close'])

const close = () => {
	emits('close')
}

let priceRangeList = props.productSaleInfo.priceRangeList
// 最小
let minNum = 0

let nameList = ref([])
let totalNumber = ref(0)
let totalMoney = ref(0)
let activeIndex1 = ref(0)
let activeSkuList = ref([])

let activeIndex2 = ref(0)
let activeSku = ref(null)

const makeupSku = (productSkuInfos) => {
	if (!productSkuInfos) {
		productSkuInfos = [
			{
				amountOnSale: props.productSaleInfo.amountOnSale,
				consignPrice: props.productSaleInfo.consignPrice,
				specId: 'single',
				skuAttributes: [{ skuImageUrl: '' }],
			},
		]
	}

	let nameList1 = []

	for (let index = 0; index < productSkuInfos.length; index++) {
		let sku1 = productSkuInfos[index]

		let sku = {
			specId: sku1.specId,
			price: sku1.price || '',
			amountOnSale: sku1.amountOnSale,
			skuImageUrl: sku1.skuAttributes.length > 1 ? sku1.skuAttributes[1].skuImageUrl : '',
		}

		if (sku1.skuAttributes.length == 1) {
			sku.name1 = ''
			sku.value1 = ''

			sku.name2 = sku1.skuAttributes[0].attributeNameTrans
			sku.value2 = sku1.skuAttributes[0].valueTrans
			sku.number = 0
			// 判断sku上是否有价格
			// sku.price = priceRangeList[0].price;

			if (!sku.price) {
				sku.price = priceRangeList[0].price
				sku.needCalcPrice = true
			} else {
				sku.needCalcPrice = false
			}
		} else if (sku1.skuAttributes.length == 2) {
			sku.name1 = sku1.skuAttributes[0].attributeNameTrans
			sku.value1 = sku1.skuAttributes[0].valueTrans
			sku.name2 = sku1.skuAttributes[1].attributeNameTrans
			sku.value2 = sku1.skuAttributes[1].valueTrans
			sku.number = 0

			// sku.price = priceRangeList[0].price;
			if (!sku.price) {
				sku.price = priceRangeList[0].price
				sku.needCalcPrice = true
			} else {
				sku.needCalcPrice = false
			}
		}

		// 判断2个属性还是一个属性

		if (index == 0) {
			nameList1.push({
				name: sku.name1,
				value: sku.value1,
				skuImageUrl: sku1.skuAttributes[0].skuImageUrl,
				list: [sku],
			})
		} else {
			// 判断值是否一致
			let flag = false
			nameList1 = nameList1.map((item) => {
				if (item.value == sku.value1) {
					item.list.push(sku)
					flag = true
				}

				return item
			})

			if (!flag) {
				nameList1.push({
					name: sku.name1,
					skuImageUrl: sku1.skuAttributes[0].skuImageUrl,
					value: sku.value1,
					list: [sku],
				})
			}
		}
	}

	nameList.value = nameList1
}

const handleAddCart = async () => {
	// 获取当前所有sku 数量大于0的组合参数 添加到购物车
	let skuList = []

	nameList.value.map((item) => {
		item.list.map((item1) => {
			if (item1.number > 0) {
				skuList.push({
					specId: item1.specId,
					offerId: props.goodsInfo.offerId,

					skuImageUrl:
						item1.skuImageUrl ||
						item.skuImageUrl ||
						props.goodsInfo.productImage.whiteImage ||
						props.goodsInfo.productImage.images[0],
					goodsName: props.goodsInfo.subjectTrans,

					// 产品商家id
					sellerOpenId: props.goodsInfo.sellerOpenId,

					sku: item1.name1
						? `${item1.name1}:${item1.value1} ${item1.name2}:${item1.value2}`
						: `${item1.name2}:${item1.value2}`,
					number: item1.number,
					price: item1.price,
				})
			}
		})
	})

	let res = await http({ url: '/cart', method: 'post', data: skuList })

	if (res.code == 200) {
		uni.showToast({
			title: res.message,
			icon: 'none',
			mask: true,
		})

		nameList.value.forEach((item) => {
			item.list.forEach((sku) => {
				sku.number = 0
			})
		})

		activeSku.value.number = 0
	}
}

const changeActiveSku1 = (index) => {
	if (activeIndex1.value != index) {
		activeIndex1.value = index
		activeSkuList.value = nameList.value[index].list

		activeIndex2.value = 0
		activeSku.value = activeSkuList.value[activeIndex2.value]
	}
}

const changeActiveSku2 = (index) => {
	activeIndex2.value = index
	activeSku.value = activeSkuList.value[index]
}

const handleNumChange = ({ value }) => {
	nameList.value[activeIndex1.value].list[activeIndex2.value].number = value
}

onMounted(() => {
	// 组合sku
	makeupSku(props.productSkuInfos)

	if (nameList.value[activeIndex1.value].list.length > 0) {
		activeSkuList.value = nameList.value[activeIndex1.value].list

		activeIndex2.value = 0
		activeSku.value = activeSkuList.value[activeIndex2.value]
	}
})
</script>

<style scoped lang="scss">
.mask {
	position: fixed;
	top: 0;
	left: 0;

	z-index: 601;
	width: 100vw;
	height: 100vh;

	background-color: rgba($color: #000000, $alpha: 0.3);
}

.parseSkuInput {
	position: fixed;
	bottom: 0;
	left: 0;
	z-index: 602;

	box-sizing: border-box;
	display: flex;
	flex-flow: column nowrap;

	width: 750rpx;
	height: 1200rpx;

	padding: 24rpx;

	overflow-y: auto;
	background-color: #fff;
	border: 1rpx solid #000;

	border-top-left-radius: 24rpx;
	border-top-right-radius: 24rpx;
}

.info-box {
	display: flex;
	flex-flow: row nowrap;

	gap: 24rpx;
	align-items: flex-start;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 24rpx;

	.sku-img {
		width: 100rpx;
		height: 100rpx;
	}

	.price-stock {
		display: flex;
		flex-flow: row wrap;

		gap: 12rpx;
		justify-content: space-between;
		width: 570rpx;

		.price {
			flex: 1;
			font-size: 42rpx;
			color: #cc302d;
		}

		.amountOnSale {
			font-size: 24rpx;
			color: #ccc;
		}

		.number {
			width: 100%;
			font-size: 24rpx;
			color: #ccc;
		}
	}
}

.box {
	width: 100%;
	margin-bottom: 24rpx;

	.inputBox {
		width: 100%;
	}

	.name {
		display: block;
		width: 100%;
		height: 50rpx;
		margin-bottom: 12rpx;

		font-size: 30rpx;
		font-weight: 600;
		line-height: 50rpx;
		color: #333333;
	}

	.sku {
		box-sizing: border-box;
		display: flex;
		flex-flow: row wrap;
		gap: 12rpx;
		align-items: flex-start;
		justify-content: flex-start;
		width: 100%;

		min-height: 100rpx;

		overflow-x: hidden;
		overflow-y: auto;

		font-size: 24rpx;
	}

	.sku1 {
		max-height: 300rpx;
	}

	.sku2 {
		max-height: 450rpx;
	}

	.activeSkuItemLine {
		box-sizing: border-box;
		display: flex;
		flex-flow: row nowrap;
		gap: 12rpx;
		align-items: center;
		justify-content: center;
		height: 52rpx;
		font-weight: 600;
		color: #000;
		border-bottom: 2rpx solid #000;
	}

	.skuItemLine {
		box-sizing: border-box;

		display: flex;
		flex-flow: row nowrap;

		gap: 12rpx;
		align-items: center;
		justify-content: center;
		min-width: 100rpx;
		min-height: 54rpx;

		padding: 12rpx 27rpx;

		line-height: 30rpx;
		color: #888;
		border: 1rpx solid #ccc;
		border-radius: 27rpx;
	}

	.skuItem {
		box-sizing: border-box;
		display: flex;
		flex-flow: row nowrap;
		gap: 12rpx;
		align-items: center;
		justify-content: flex-start;
		min-width: 100rpx;

		min-height: 54rpx;
		padding: 12rpx 27rpx;
		line-height: 30rpx;
		color: #333;
		border: 1rpx solid #999;
		border-radius: 27rpx;
	}

	.img {
		width: 50rpx;
		height: 50rpx;
	}
}

.stock {
	display: flex;
	flex-flow: row nowrap;
	justify-content: space-between;
	width: 100%;
	margin-bottom: 24rpx;

	.name {
		font-size: 30rpx;
		font-weight: 600;
		line-height: 50rpx;
		color: #333333;
	}

	.value {
		font-size: 24rpx;
		line-height: 50rpx;
		color: #333333;
	}
}

.orderPriceWrapper {
	position: relative;
	box-sizing: border-box;

	display: flex;
	align-items: baseline;

	width: 710rpx;

	padding-left: 24rpx;
	margin-top: 40rpx;

	margin-bottom: 24rpx;
	background: #f5f5f5;
}

.orderLeftWrapper {
	display: flex;
	flex-grow: 1;
	align-items: baseline;
}

.totalCount {
	line-height: 56rpx;
	color: #666;
}

.totalPrice {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 56rpx;
	margin-right: 72rpx;
	margin-left: 38rpx;
	color: #666;
}

.totalPrice .value {
	font-size: 40rpx;
	color: #ff4000;
}

.postageValue {
	color: #666;
}

.postageValue span {
	padding-left: 24rpx;
	color: #666;
}

.actionBtns {
	position: absolute;
	bottom: 24rpx;
	left: 5%;

	z-index: 996;
	box-sizing: border-box;
	width: 90%;
	background-color: #fff;
}
</style>
